<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>订单报表</title>
    <base href="http://localhost/campus/">
    <link rel="shortcut icon" href="static/favicon.ico" type="image/x-icon"/>
    <script src="static/js/jquery.min.js"></script>
    <script src="echarts/echarts.min.js"></script>
</head>
<body>
<div id="newOrder" style="width: 60%;height: 42%;margin: 0.5% auto;padding: 1%;background: #fff;border-radius: 8px;"></div>
<div style="width: 100%;height: 50%;">
    <div id="orderState" style="width: 38%;height: 84%;margin: 0.4% 2%;padding: 1% 3%;float: left;background: #fff;border-radius: 8px"></div>
    <div id="payWay" style="width: 38%;height: 84%;margin: 0.4% 2%;padding: 1% 3%;float: left;background: #fff;border-radius: 8px"></div>
</div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var newOrderChart = echarts.init(document.getElementById('newOrder'));
    var orderStateChart = echarts.init(document.getElementById('orderState'));
    var payWayChart = echarts.init(document.getElementById('payWay'));

    let newAddOrderCountData = null;
    let AllOrderCountData = null;
    let timeData = null;
    let orderStateCountData = null;
    let orderStateData = null;
    let payWayCountData = null;
    let payWayData = null;


    $.ajax({
        url: "http://localhost/campus/reports/order/new"
        , type: "GET"
        , async: false
        , success: function (res) {
            AllOrderCountData = res.data.curOrderCountList;
            newAddOrderCountData = res.data.newOrderCountList;
            timeData = res.data.timeList;
        }
    });

    $.ajax({
        url: "http://localhost/campus/reports/order/state"
        , type: "GET"
        , async: false
        , success: function (res) {
            orderStateData = res.data.orderStateList;
            orderStateCountData = res.data.stateCountList;
        }
    });

    $.ajax({
        url: "http://localhost/campus/reports/order/payWay"
        , type: "GET"
        , async: false
        , success: function (res) {
            payWayData = res.data.payWayList;
            payWayCountData = res.data.PayWayCountList;
        }
    });

    // 指定图表的配置项和数据
    var newOrderOption = {
        title: {
            text: '每日订单增量曲线图'
        },
        grid: {
            width: 600
            , height: 120
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['每日新增订单', '订单总数']
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: timeData
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            }
        },
        series: [
            {
                name: '每日新增订单',
                type: 'line',
                data: newAddOrderCountData,
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            },
            {
                name: '订单总数',
                type: 'line',
                data: AllOrderCountData
            }
        ]
    }


    var orderStateOption = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        title: {
            text: '不同订单状态的订单数',
            left: 'center'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: orderStateData,
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '订单数',
                type: 'bar',
                barWidth: '42%',
                data: orderStateCountData
            }
        ]
    };

    let len = payWayCountData.length;
    let payWayMap = [];
    for (let i = 0; i < len; i++) {
        let tmp = {};
        tmp['name'] = payWayData[i];
        tmp['value'] = payWayCountData[i];
        payWayMap[i] = tmp;
    }

    var payWayOption = {
        title: {
            text: '支付方式占比',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
        },
        series: [
            {
                name: '支付方式',
                type: 'pie',
                radius: '50%',
                data: payWayMap,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };


    // 使用刚指定的配置项和数据显示图表。
    newOrderChart.setOption(newOrderOption);
    orderStateChart.setOption(orderStateOption);
    payWayChart.setOption(payWayOption);
</script>
</body>
</html>
